The Agency

WITHIN WORDPRESS

• Navigate to Appearance -> Themes -> Install Themes. Go to Upload, and select the file “theagency-v2.zip” within the zipped file you downloaded from ThemeForest.net. Hit ‘Install now’ and the theme will be uploaded and installed. This may take some time.

FTP UPLOAD

• Using your FTP client, upload the non-zipped theagency-v2 folder into the wp-content/themes folder on your server. Go to Appearance -> Themes and activate the theme. The template is now installed and activated.

Tips: I suggest that you import the Dummy-contents files to learn how the template works.

The custom admin panel was developed to make the life on the end user (you) a whole lot easier. Within the custom admin panel you’ll find all extra options to have your theme the way you want.

Within the WordPress administrative panel, on your left side menu, just click the last item Appearance -> Theme Options.

Tips: I suggest that you import the theme-options.txt file to duplicate the Custom Options of our Live Preview.

This theme require custom menus to work. You can found the custom menus management under Appearence -> Menus.

• You’ll need to create at least one new menu for the header. This theme also supports more custom menus, which you could use in the widget area. Click the + to add a new menu.
• Now, on the left hand side, select the pages you would like to have added to the menu. You can then click “Add to Menu” and they will show up on the right side of the page. You can drag the pages around to arrange them the way you’d like.
• Create a drop menu by dragging menu items under and to the right of another menu item.
• Save the menu when finished.
• Now that you have the menu created, you need to assign it in the Theme Locations window located on the left. From the drop down menu, select the appropriate menu for the header and save.

This theme use the built-in WordPress custom post type feature for managing and showcasing your work. In this section, you will learn how to add and manage your work.

CREATING YOUR FIRST PROJECT

Head over the projects menu item in the left navigation area, click on Add New.

• Enter the project title.
• Set your featured image.
• Assign categories & tags for this project.
• Enter a small description of your project in the Excerpt field.
• Use the content editor to create any content you want about your project. You can build a gallery by clicking on Add Media button. Refer to the Create a gallery section to learn more about galleries in this theme.
• Use the available Built-in shortcodes to create a beautiful showcase layout for your projects.

LAYOUT & STYLE

• Header: Use this setting to set your header style to Light or Dark. That will affect the way your Branding and Navigation items will show up.
• Layout
  • Fullwidth: Be free to build anything you want with this layout. Use the available Built-in shortcodes to create a beautiful showcase layout for your projects.
  • Width sidebar: Useful if you want to create a gallery only. The sidebar will display the project title, excerpt and categories. You still can use the content editor to create anything you want.
• Cover Text Color: Used to set the text color displayed on the project cover image. This setting is related directly with the project accent color below.
• Accent Color: This setting will set the background hover color when you mouse over a project cover image.

PROJECT HERO

• Image: The hero image is set as a page background with Backstrech.js plugins. Suggested image size: 1920×1080 pixels.
• Video (WEBM, MP4): Upload your high definition video here if you want to use a video for the project hero.

PROJECT METADATA

• Sidebar text: If you set the project layout to With sidebar, this text will be displayed under the project title along with the project’s categories. By the way, project’s categories are displayed as Deliverables.

BUILDING A GALLERY

The built-in WordPress gallery feature has been altered within the theme functions to display nice and large gallery images with the possibility to click on them to display a fullscreen slideshow with thumbnail navigation.

• Click on Add Media button.
• Click on Create Gallery link.
• Upload or select your images. When done, click on Create a new gallery button (bottom right of the windows).
• Organize your gallery, drag and drop to reorder images.
• Within the Gallery Settings, set your images to link To Media File. Columns have no effect at all, leave it to 3.
• Click on Insert gallery.

Add a new page > Projects. 

Select from page attribute the Template Projects

Go to Menu and add the Projects page to menu and save.

Use a row to create a container around your content, such as columns or to create content sections with different background color and padding.

ATTRIBUTES

• padding: set the row padding.
• bg_color: set the background color of the row.
• bg_image: set the background image the row.
• bg_repeat: set how the background repeat. (values: repeat, no-repeat, repeat-x, repeat-y)
• text_color: set text color within the row.
• text_align: set text alignment within the row. (values: left, right, center)

[row padding="8%" bg_color="#f2f2f2"]
<p>This row contain two columns.</p>
[one_half bg_color="#c1e8f3" padding="4%"]1/2[/one_half]
[one_half bg_color="#c1e8f3" padding="4%" last="true"]1/2[/one_half]
[/row]

Easily design beautiful column layout pages with the column short codes.

ATTRIBUTE(S)

• padding: set the column padding.
• bg_color: set the background color of the column.
• last: remove the right margin of the last column within a row (values: false, true).

One Half

[one_half bg_color="#c1e8f3" padding="4%"]1/2[/one_half]
[one_half bg_color="#c1e8f3" padding="4%" last="true"]1/2[/one_half]

ONE_THIRD

[one_third bg_color="#c1e8f3" padding="4%"]1/3[/one_third]
[one_third bg_color="#c1e8f3" padding="4%"]1/3[/one_third]
[one_third bg_color="#c1e8f3" padding="4%" last="true"]1/3[/one_third]

ONE_FOURTH

[one_fourth bg_color="#c1e8f3" padding="4%"]1/4[/one_fourth]
[one_fourth bg_color="#c1e8f3" padding="4%"]1/4[/one_fourth]
[one_fourth bg_color="#c1e8f3" padding="4%"]1/4[/one_fourth]
[one_fourth bg_color="#c1e8f3" padding="4%" last="true"]1/4[/one_fourth]

THREE_FOURTH

[one_fourth bg_color="#c1e8f3" padding="4%"]1/4[/one_fourth]
[three_fourth bg_color="#c1e8f3" padding="4%" last="true"]3/4[/three_fourth]

Padding

White space, this is all about good and minimalist design. Don’t be afraid of this short code.

ATTRIBUTES

• top: top padding (default value: 8%).
• right: right padding (default value: 8%).
• bottom: bottom padding (default value: 8%).
• left: left padding (default value: 8%).

[row padding="8%" bg_color="#f2f2f2"]
This row has 8% padding.
[/row]

Spacer

Spacer, used to add space between elements, also useful to clear floats.

ATTRIBUTES

• top: top padding (default value: 0px).
• bottom: bottom padding (default value: 0px).

[spacer top="0px" bottom="0px"][/spacer]

Lists

Create different type of lists with this short code.

ATTRIBUTES

• type: list type (values: plain, border, unordered, ordered).

[list type="plain"]
<li>This is a plain list</li>
[/list]

[list type="ordered"]
<li>This is a ordered list</li>
[/list]

[list type="unordered"]
<li>This is a unordered list</li>
[/list]

[list type="border"]
<li>This is list with bottom border</li>
<li>This is list with bottom border</li>
<li>This is list with bottom border</li>
[/list]

Icons

Create any icon combinations.

ATTRIBUTES

• icon: enter the icon name. (See all the available icons here).
• icon_size: define the icon size (values: fa-2x, fa-3x, fa-4x, fa-5x).
• set_custom_icon_size: enable to use a custom icon size (values: true, false).
• custom_icon_size: set the custom icon size.
• custom_icon_margin: spacing between icon and text.
• image: enter the url of the image if you don’t want to use the Font Awesome Icons library.
• icon_type: set the icon type. (values: normal, circle, square)
• icon_position: set the icon location. (values: top, left, left_from_title)
• icon_margin: margin should be set in a top right bottom left format. (i.e.: 0 0 28px 0)
• icon_border_color: set the icon border color. (Only for square and circle type)
• icon_color: set the icon color.
• icon_background_color: set the icon background color. (Only for square and circle icon type)
• title: set the title.
• title_tag: set the title tag. (values: h2, h3, h4, h5)
• title_color: set the title color.
• text: set the text.
• text_color: set the text color.
• link: set the link url if any.
• link_text: set the link text.
• link_color: set the link text color.
• target: set the link target. (values: _self, _blank)

[icon_text icon="fa-header" icon_type="circle" icon_position="top" icon_size="fa-4x" icon_background_color="#00a9c5" icon_border_color="#00a9c5" icon_color="#ffffff" title="About us" text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam." link="#" link_text="Learn more"]

[icon_text icon="fa-desktop" icon_type="circle" icon_position="left" icon_size="fa-3x" use_custom_icon_size="no" title="Beautiful design" text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam."]

[icon_text icon="fa-key" icon_type="normal" icon_position="left_from_title" icon_size="fa-2x" use_custom_icon_size="no" title="Fully Customizible" text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam."]

Buttons

ATTRIBUTES

• size: set the button size (values: small, medium, large, extra_large, full_width).
• color: set the button color (values: white, gray, black, accent).
• text: set the button text.
• text_color: set the button text color.
• font_style: set the button text font style.
• font_weight: set the button text font weight.
• align: set the button alignment (values: left, right).
• icon: set the button icon if any
• icon_color: set the button icon color
• margin: set the button margin (i.e.: 12px 0 24px 0)
• link: set the button url
• target: set the button url target (values: _self, _blank)

[row bg_color="#f2f2f2" text_align="center"]
[padding]
[button size="small" color="gray" text="Read more" link="#"][/button]
[button size="small" color="accent" text="Order now" link="#"][/button]
[/padding]
[/row]

[row bg_color="#f2f2f2" text_align="center"]
[padding]
Extra large button.<p></p>
[button size="extra_large" color="gray" text="Extra Large button" link="#"][/button]
[/padding]
[/row]

[row bg_color="#1c1c1e" text_color="#fff" text_align="center"]
[padding]
Buttons with icon.<p></p>
[button color="white" icon="fa-linux" size="large" text="Linux" link="#"][/button]
[button color="white" icon="fa-apple" size="large" text="Apple" link="#"][/button]
[/padding]
[/row]

[row bg_color="#00a9c5" text_color="#fff" text_align="center"]
[padding]
Fullwidth button.<p></p>
[button color="white" icon="fa-arrows-h" size="full_width" text="Fullwidth button" link="#"][/button]
[/padding]
[/row]

Line

Line is used to mark a separation point. Beautiful just after a heading.

ATTRIBUTES

• size: width size of the line (values: small, full).
• color: color of the line (values: white, gray, black, accent).

[row]
Small line.
[line color="black" size="small"]
[/row]

[row]
Full width line.
[line color="black" size="full"]
[/row]

Heading blocks

Heading blocks are intended to build big bold attention areas. You can catch attention with these or just say a one liner.

ATTRIBUTE(S)

• bg_color: set the background color of the section.
• bg_image: set the background image of the section.
• text_align: set the text alignment within the section.
• text_color: set the text color within the section.
• text_size: set the text size within the section.
• font_weight: set the text font weight within the section. (values: 300, 400, 500, 600, 700, 900)

[row]
[heading_block bg_color="#00a9c5" text_color="#fff" text_size="4.5em"]We design brand and product experiences for the connected world.[/heading_block]
[/row]

Text blocks

Text blocks are intended to build header areas for sections. You can catch attention with these or just say a one liner.

ATTRIBUTE(S)

• title: set the title of the block.
• title_tag: set the title tag of the block. (values: h1, h2, h3, h4, h5)
• title_color: set the title color of the block.
• bg_color: set the background color of the block.
• bg_image: set the background image of the block.
• text_color: set the text color within the block.
• sep_padding: set the padding of the separator.
• sep_color: set the color of the separator.
• padding_top: set the top padding of the block.
• padding_bottom: set the bottom padding of the block.

[text_block bg_color="#fff" title_color="#1c1c1e" text_color="#9c9d9f" sep_color="#1c1c1e" title="Black on white"]Fusce blandit adipiscing libero, nec bibendum diam volutpat tempor. Donec fermentum diam leo, ut convallis nisl tristique ut. Ut rhoncus leo vitae tempus pulvinar.[/text_block]

Text columns

This short code allow you to easily set a definition of multiple columns of text.

ATTRIBUTES

• col: set the number of columns. (values: 2, 3, 4)

[text_columns col="2"]Your text here[/text_columns]

Divider

Divider is used to divide sections with a title.

[divider]Section title[/divider]

Lead text

The lead text short code simply create paragraph with bigger font size than normal text. Useful to emphasize or create an introduction.

ATTRIBUTE(S)

• text_color: set color of the text.

[lead text_color="#1c1c1e"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.[/lead]

Highlight

Use this short code to highlight a part of text within a paragraph.

There are many variations of passages of Lorem Ipsum available, [highlight]but the majority have suffered alteration[/highlight] in some form, by injected humour, or randomised words which don't look even slightly believable.

Pricing tables

Build beautiful and fully customizible pricing tables.

ATTRIBUTES

• columns: number of tables (values: one, two, three, four, five)
• title: table title.
• title_tag: table title tag. (values: h1, h2, h3, h4, h5)
• title_size: table title size. (default value: 32px)
• title_color: table title color.
• subtitle: table subtitle.
• price: table price.
• price_color: table price color.
• currency: table price currency. (default value: $)
• price_period: table price period. (default value: /mo)
• text_color: table content text color.
• sep_color: color of the separator.
• active: give the table an active class and unique top banner.
• active_text: active top banner text (default value: BEST OFFER)
• bg_color: table content background color.

[pricing_tables columns="three"]
[pricing_table title="Entry" subtitle="Package" price="14.95" currency="$" price_period="/mo" active="" active_text="" bg_color=""]
<ul>
<li>2 vCores</li>
<li>2 GB RAM guaranteed</li>
<li>25 GB Raid 10 Hard Drive</li>
<li>100 Mbps Bandwidth</li>
<li>1 IPv4/IPv6 included</li>
<li>24/7 Technical Support</li>
</ul>
[/pricing_table]
[pricing_table title="Standard" subtitle="Package" price="22.95" currency="$" price_period="/mo" active="yes" active_text="BEST OFFER" bg_color="#1c1c1e" title_color="#fff" price_color="#fff" sep_color="#9c9d9f" text_color="#9c9d9f"]
<ul>
<li>4 vCores</li>
<li>4 GB RAM guaranteed</li>
<li>50 GB Raid 10 Hard Drive</li>
<li>100 Mbps Bandwidth</li>
<li>1 IPv4/IPv6 included</li>
<li>24/7 Technical Support</li>
</ul>
<img src="https://dl.dropboxusercontent.com/u/1699200/Envato/Themes/TheAgency-v2/vmware-powered.png" alt="vmware-powered" width="122" height="52" class="aligncenter size-full wp-image-817">
[spacer top="24px" bottom="24px"][/spacer]
[/pricing_table]
[pricing_table title="Expert" subtitle="Package" price="49.99" currency="$" price_period="/mo" active="" active_text="" bg_color=""]
<ul>
<li>6 vCores</li>
<li>8 GB RAM guaranteed</li>
<li>100 GB Raid 10 Hard Drive</li>
<li>100 Mbps Bandwidth</li>
<li>1 IPv4/IPv6 included</li>
<li>24/7 Technical Support</li>
</ul>
[/pricing_table]
[/pricing_tables]

Service tables

Build beautiful and fully customizible service tables.

ATTRIBUTES

• title: table title.
• title_tag: table title tag. (values: h1, h2, h3, h4, h5)
• title_color: table title color.
• icon: table icon.
• icon_size: table icon size. (values: fa-2x, fa-3x, fa-4x, fa-5x)
• icon_custom_size: table icon custom size (use px or em)
• bg_color: table background color
• border_color: table border color
• border_size: table border size (default value: 1px)

[one_third]
[service_table bg_color="#f7f7f7" border_color="#f7f7f7" title="Service Title 1" icon="fa-cubes" icon_size="fa-3x"]
<ul>
<li>Contrary to popular belief, Lorem Ipsum is not simply random text.</li>
<li>Website development</li>
<li>Web & database hosting</li>
<li>24/7 technical support</li>
<li>Mobile Ready</li>
</ul>
[/service_table]
[/one_third]
[one_third]
[service_table bg_color="#f7f7f7" border_color="#f7f7f7" title="Service Title 2" icon="fa-empire" icon_size="fa-3x"]
<ul>
<li>Contrary to popular belief, Lorem Ipsum is not simply random text.</li>
<li>Website development</li>
<li>Web & database hosting</li>
<li>24/7 technical support</li>
<li>Mobile Ready</li>
</ul>
[/service_table]
[/one_third]
[one_third last="true"]
[service_table bg_color="#f7f7f7" border_color="#f7f7f7" title="Service Title 3" icon="fa-slack" icon_size="fa-3x"]
<ul>
<li>Contrary to popular belief, Lorem Ipsum is not simply random text.</li>
<li>Website development</li>
<li>Web & database hosting</li>
<li>24/7 technical support</li>
<li>Mobile Ready</li>
</ul>
[/service_table]
[/one_third]